<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
// @ts-ignore SFC 默认导出 shim
import MarsMap from './components/MarsMap.vue'
// @ts-ignore SFC 默认导出 shim
import ImportList from './components/ImportList.vue'
// @ts-ignore SFC 默认导出 shim
import WaylineEditor from './components/WaylineEditor.vue'
// @ts-ignore SFC 默认导出 shim
import EditorHeader from './components/EditorHeader.vue'
// @ts-ignore SFC 默认导出 shim
import Dji3DLoader from './components/Dji3DLoader.vue'

const editorRef = ref<any>(null)
const showEditor = ref(false)

function handleOpenEditor() {
  showEditor.value = true
}

onMounted(() => {
  window.addEventListener('wayline:openEditor', handleOpenEditor)
})
onBeforeUnmount(() => {
  window.removeEventListener('wayline:openEditor', handleOpenEditor)
})
</script>

<template>
  <div class="app-wrap">
    <div class="map-wrap">
      <MarsMap />
      <EditorHeader
        :isChanged="editorRef?.isChanged ?? false"
        :isEditing="showEditor"
        :isFlightPanel="editorRef?.isFlightPanel ?? false"
        @save="editorRef?.save?.()"
        @goback="editorRef?.goback?.()"
        @toggle="(showEditor = !showEditor, editorRef?.deleteCurrent?.())"
        @export-common-kml="editorRef?.exportCommonKml?.()"
        @export-flight-kml="editorRef?.exportFlightKml?.()"
        @export-dji-kmz="editorRef?.exportDjiKmz?.()"
        @open-flight-params="editorRef?.toggleFlightParams?.()"
      />
      <ImportList v-if="!showEditor" />
      <WaylineEditor ref="editorRef" :show-left="showEditor" />
      <Dji3DLoader />
    </div>
  </div>
</template>

<style scoped>
.app-wrap { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
.banner { position: absolute; z-index: 10; top: 10px; left: 10px; padding: 6px 10px; background: rgba(0,0,0,.45); border-radius: 6px; }
.map-wrap { position: absolute; inset: 0; }
</style>
